<template>
    <div v-if="detailData.status == 'running'">     
      <div>
        <div>
          <p class="info-item-name" v-if="tcpPortList.length != 0">仿真端口映射</p>        
        </div>
        <ul class="info-item">             
          <div><p>--------------------</p></div>    
          <li v-for="(tag, i) in tcpPortList" :key="i">          
            <span class="key">协议：{{tag.proxyProtocol}}</span>
            <span class="key">容器端口：{{tag.containerPort}}</span> 
            <span class="key">映射端口：{{tag.nodePort}}</span>
            <span class="key">映射地址：{{tag.endpoint}}</span>
          </li>
        </ul>
      </div> 
        <br/>
        <br/>
      <div>
        <div>
          <p class="info-item-name" >节点容器信息</p>
        </div> 
        <div>
          <div class="info-item"><span>仿真节点:</span></div>               
          <ul class="info-pad">
            <div><p>--------------------</p></div>    
            <li v-for="(pod, i) in simulationPod.pod_list" :key="i">
              <p class="key">节点名称：{{pod.name}}</p> 
              <p class="val">节点id：{{pod.uid}}</p>
              <p class="val">节点ip：{{pod.pod_ip}}</p>
            </li>
          </ul>             
        </div>
        <br/>
        <div>
          <div class="info-item"><span>业务节点:</span></div>          
          <ul class="info-pad">
            <div><p>--------------------</p></div>   
            <li v-for="(group, i) in jobPod" :key="i">
              <p class="key">节点分组-{{i}}</p>
              <div v-for="(pod, j) in group.pod_list" :key="j">
                <p class="key">节点名称：{{pod.name}}</p> 
                <p class="val">节点id：{{pod.uid}}</p>
                <p class="val">节点ip：{{pod.pod_ip}}</p>                              
                <br/>
              </div>   
            </li>                           
            <br/>
          </ul>
        </div>
      </div>
    </div>
    
  </template>
  
  <script>
  export default {
    data () {
      return {
        activeName: '1',
        simulationPod: [],
        jobPod: [],
        tcpPortList: []
      };
    },
    props: ['detailData'],
    async mounted () {
      this.$nextTick(async () => {
        await this.getData()        
        this.simulationPod  = this.detailData.simulation_node_group;
        this.jobPod = this.detailData.node_group_list;
        this.tcpPortList = this.detailData.tcp_port_list
      })
    },
    components: {
    },
    methods: {
      handleClick() {},
      async getData() {
        await new Promise(resolve => {
            setTimeout(() => {
              this.target = ['上海', '北京', '广州', '深圳']
              resolve()
            }, 1000)
        })
        return
      }   
    }
  }
  </script>
  <style lang="less" scoped>
  .info-item-name {
    line-height: 26px;
    color: #606266;
    padding: 8px 16px;
  }
  .info-item {
    margin: 0 16px;
    background: #FFF;
  
    li {
      display: flex;
      width: 100%;
      justify-content: space-between;
      border-bottom: 1px solid #E6E6E6;
      line-height: 40px;
      height: 40px;
      padding: 0 8px;
    }
  
    .key {}
  
    .val {
      min-width: 220px;
    }
  }

  .info-pad {
    margin: 0 16px;
  }
  
  </style>